<template>
  <div v-if="props.arrowPosition === 'left'" class="flex items-center">
    <div class="h-1 w-1 rotate-45 translate-x-[2px] bg-c-white">&nbsp;</div>
    <div
      class="text-c-grey-3xl bg-c-white rounded-lg heading-s-medium px-2 py-1 shadow-hover-m"
    >
      {{ props.text }}
    </div>
  </div>
  <div
    v-else-if="props.arrowPosition === 'up'"
    class="flex flex-col flex-nowrap justify-center whitespace-nowrap"
  >
    <div class="h-1 w-1 rotate-45 bg-c-white">&nbsp;</div>
    <div
      class="text-c-grey-3xl bg-c-white rounded-lg heading-s-medium px-2 py-1 shadow-hover-m"
    >
      {{ props.text }}
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  text: string
  arrowPosition?: 'left' | 'up'
}
const props = withDefaults(defineProps<Props>(), {
  text: '',
  arrowPosition: 'left'
})
</script>

<style scoped></style>
